<template>
  <div class="publish-goods">

    <el-breadcrumb class="back-btn" separator-class="el-icon-arrow-right">
      <el-button  @click='appBack' type="primary"> < 返回 </el-button>
    </el-breadcrumb>

    <div class="publish-container">
      <div class="inputDiv">
        <div class="labelName mandatory">商品名称：</div>
        <div class="elInput">
          <el-input v-model="goods_name"></el-input>
        </div>
      </div>
      <div class="inputDiv">
        <div class="labelName mandatory">所属分类：</div>
        <div class="elInput">
          <el-cascader @change="getGoodsAttr" expand-trigger="hover" :options="typeOptions" v-model="gtid"></el-cascader>
        </div>
      </div>
      <div class="uploadImg clearfix">
        <div class="labelName mandatory lf">商品图片：</div>
        <div class="uploadList lf clearfix">
          <draggable :options="dragOptions" class="img_list lf" element="ul" v-model="goods_imgs" :move="onMove" @start="isDragging=true" @end="isDragging=false">
            <li class="img_item" v-for="(item,index) of goods_imgs" :key="index">
              <img class="show_img" :src="item.file_path" alt="">
              <span class="del" @click="del_goods_img(index)">
                <img src="../assets/goods_detail/delete.png" alt="">
              </span>
            </li>
          </draggable>
          <div class="add-pic-btn lf">
            <div class="add-pic-btn-inner">
              <div class="add-icon">+</div>
              <span class="btn-text">添加图片</span>
            </div>
            <label class="upload-button-trigger-label"></label>
            <form action="" class="upload-button-form" enctype="multipart/form-data">
              <input class="uploadFile" @change="upLoadGoodsImg($event)" type="file" multiple="multiple" accept="image/jpg,image/jpeg,image/png"/>
            </form>
          </div>
        </div>
      </div>
      <div class="attrs clearfix">
        <div class="labelName">商品规格：</div>
        <div class="attrs-list">
          <ul>
            <li class="list-item" v-for="(attr,i) in attrs" :key="i">
              <div class="select-type" >
                <select @change="selectAttr(attr.specs,i,$event)" v-model="attr.specs">
                  <option :key="item.gaid" v-for="item in attrOptions" :value="item">{{item.name}}</option>
                </select>
                <span class="del" @click="delRow(i)"></span>
              </div>
              <div class="sizelist clearfix">
                <ul class="attr-value-panel lf clearfix">
                  <li v-for="(value,k) in attr.values" :key="k" class="attr-val-item lf">
                    <div class="val-text">
                      <div class="value">{{value.value}}</div>
                      <span class="del" @click="delAttrValues(i,k)"></span>
                    </div>
                    <div class="uploadImg-box" v-if="i===0">
                      <div v-if="!value.image" class="uploadImg-tips">
                        <div class="add-icon">+</div>
                        <div class="des">添加规格图片</div>
                        <input type="file" class="uploadInputFile" @click="uploadAttrValuesImg($event,i,k)">
                      </div>
                      <div v-else class="previewImages">
                        <img :src="value.image" alt="" :title="value.image">
                        <div class="change-btn">
                          重新上传<input type="file" class="uploadInputFile" @click="uploadAttrValuesImg($event,i,k)">
                        </div>
                      </div>
                    </div>
                  </li>
                  <div class="btns lf" v-show="attrs.length>0" >
                    <el-popover placement="top" width="416px" trigger="click" v-model="attr.currentModal">
                      <el-input autofocus="autofocus" @keyup.enter.native="addMoreValue(i,attr.specs)"
                                style="width:266px;margin-right:10px;" v-model="attr.currentAttrValue"></el-input>
                      <el-button size="small" type="primary" @click="addMoreValue(i,attr.specs)">确定</el-button>
                      <el-button size="small" @click="attr.currentModal=false">取消</el-button>
                      <el-button slot="reference" class="elButton" type="primary">添加值</el-button>
                    </el-popover>
                  </div>
                </ul>
              </div>
            </li>
          </ul>
          <div class="addSpecs" v-show="attrs.length<3">
            <div class="btns" @click="handleClickAddAttrs()">添加规格</div>
          </div>
        </div>
      </div>
      <div class="priceStock clearfix">
        <div class="labelName mandatory lf">价格/库存：</div>
        <div class="table-container clearfix">
          <table v-if="skus.length>0">
            <thead>
              <th v-if="skus.length>0" v-for="(item,index) in skus[0].attrs" :key="index">
                {{item.name}}
              </th>
              <th style="width:147px">成本价</th>
              <th style="width:147px">加价比例</th>
              <th style="width:147px">零售价</th>
              <th style="width:147px">玩购价</th>
              <th style="width:147px">星星价（颗）</th>
              <th style="width:147px">库存（件）</th>
              <th style="width:147px">兑换库存（件）</th>
            </thead>
            <tr v-show="skus.length>1">
              <td :colspan="skus[0].attrs.length" >批量设置</td>
              <td>
                <input v-model="supply_price" @keyup="batchData(1,$event,0)" @change="batchData(1,$event,0)" class="skusInput" type="number" min="0" >
              </td>
              <td>
                <el-select v-model="premium[0]" placeholder="请选择" @change="onPremiumChange(0)">
                  <el-option
                    v-for="(item, index) in premiumOption"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <input v-model="sell_price" @keyup="batchData(2,$event,0)" @change="batchData(2,$event,0)" class="skusInput" type="number" min="0" >
              </td>
              <td>
                <input v-model="play_price" @keyup="batchData(3,$event,0)" @change="batchData(3,$event,0)" class="skusInput" type="number" min="0" >
              </td>
              <td>
                <input v-model="star_price" @keyup="batchData(4,$event,0)" @change="batchData(4,$event,0)" class="skusInput" type="number" min="0" >
              </td>
              <td>
                <input v-model="stock" @keyup="batchData(5,$event,0)" @change="batchData(5,$event,0)" class="skusInput" type="number" min="0" >
              </td>
              <td>
                <input v-model="exchange_stock" @keyup="batchData(6,$event,0)" @change="batchData(6,$event,0)" class="skusInput" type="number" min="0" >
              </td>
            </tr>

            <tr v-if="skus.length>0" v-for="(item,i) in skus" :key="i">
              <td v-for="(attr,j) in item.attrs" :key="j">
                {{attr.value}}
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.supply_price" @keyup="batchData2(1,$event,i)">
              </td>
              <td>
                <el-select v-model="premium[i+1]" placeholder="请选择" @change="onPremiumChange(i+1)">
                  <el-option
                    v-for="(item, index) in premiumOption"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.sell_price" @keyup="batchData2(2,$event,i)">
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.play_price" @keyup="batchData2(3,$event,i)">
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.star_price" @keyup="batchData2(4,$event,i)">
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.stock" @keyup="batchData2(5,$event,i)">
              </td>
              <td>
                <input class="skusInput" type="number" v-model="item.exchange_stock" @keyup="batchData2(6,$event,i)">
              </td>
            </tr>

          </table>
        </div>
      </div>

      <div class="inputDiv">
        <div class="labelName mandatory">&nbsp;&nbsp;运费：</div>
        <div class="shipping clearfix">
          <div class="lf radio-container">
            <el-radio v-model="isShipping" label="1">统一运费</el-radio>
          </div>
          <div class="lf">
            <el-input :disabled="!isShipping" v-model="shipping"></el-input>
          </div>
        </div>
      </div>

      <div class="inputDiv">
        <div class="labelName mandatory">商品来源：</div>
        <div class="goodsSource">
          <el-radio v-for="(item,index) in sourceList" :key="index" v-model="goodsSource" :label="item">
            {{item.gs_name}}
          </el-radio>
          <el-radio v-model="goodsSource" label="0">其他</el-radio>
        </div>
        <div class="otherSource">
          <el-input v-model="otherSource" :disabled="goodsSource!=='0'"></el-input>
        </div>
      </div>

      <div class="goodsLink">
        <div class="labelName mandatory">商品链接：</div>
        <div class="elInput">
          <el-input style="width:653px;" type="textarea" v-model="goods_url"></el-input>
        </div>
      </div>

      <div class="goodsLink">
        <div class="labelName">商品描述：</div>
        <div class="elInput">
          <el-input style="width:653px;" type="textarea" v-model="text_description"></el-input>
        </div>
      </div>

      <div class="editorDetail">
        <div class="labelName mandatory">商品详情：</div>
        <div id="editorElem"></div>
      </div>
    </div>
    <div class="control-btns">
      <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" :disabled="fullscreenLoading" @click="handleClickPublish(true)">上架商品</el-button>
      <el-button v-loading.fullscreen.lock="fullscreenLoading" :disabled="fullscreenLoading" @click="handleClickPublish(false)" >存入仓库</el-button>
      <el-button  @click="preview()">预览</el-button>
    </div>


    <el-dialog
      title="商品预览"
      :visible.sync="previewModal_show"
      :width="modal_width_height"
      top="40px"
      center
      customClass="preview-box"
      :before-close="handleClose">
      <div class="preview-content">
        <!--轮播图-->
        <div class="preview-banner">
            <el-carousel indicator-position='none' :autoplay=false @change="onCarouselChange" :height="modal_width_height">
              <el-carousel-item v-for="(item, index) in goods_imgs" :key="index">
                <img :src="item.file_path" alt="">
              </el-carousel-item>
            </el-carousel>
            <div class="goods-index"> {{carouselIndex}}/{{goods_imgs.length}} </div>
        </div>

        <!--基本信息-->
        <div class="goods-info">
          <div class="info-top">
            <div class="top-left">
              <div class="my-star">我的星星 <span class="star-num"> 9999 </span>
                <span >原价：
                  {{ Math.min.apply(null, skusSellPrice) === Math.max.apply(null, skusSellPrice) ? "￥"+ skusSellPrice[0] : "￥"+Math.min.apply(null, skusSellPrice) +" ~ ￥"+Math.max.apply(null, skusSellPrice) }}
                </span>
              </div>
              <div class="goods-name">{{goods_name}}</div>
            </div>
            <div class="top-right">
              <img src="../assets/icons/share.png" alt="" width="30" height="30">
              <div class="share">赚星星</div>
            </div>
          </div>
          <div class="info-bottom">
            <div>快递：{{shipping}}元</div>
            <div>销量：0</div>
            <div>已抓：0</div>
          </div>
        </div>

        <!--图文-->
        <div class="goods-rich">
          <div class="goods-detail">
            <img src="../assets/icons/goods_detail.png" alt="" width="20" height="14">商品详情
          </div>
          <div class="goods-content" v-html="description"></div>
        </div>

        <div v-if="skus.length>0" class="action" slot="footer">
          <div class="home-coll">
            <div class="action-sm">
              <img src="../assets/icons/icon-home.png" alt="" width="20" height="20">
              <div>首页</div>
            </div>
            <div class="action-sm">
              <img src="../assets/icons/icon-collection.png" alt="" width="20" height="20">
              <div>收藏</div>
            </div>
          </div>
          <div class="action-lg buy-now" @click="optionBoxShow">
            <div> {{Math.round((skus[0].sell_price - skus[0].supply_price * 0.2) * 100) / 100}}元+{{ skus[0].supply_price * 20 }}星 </div>
            <div>直接购买</div>
          </div>
          <div class="action-lg play-now">
            <div> {{skus[0].play_price}} 星/抓</div>
            <div>立即抓</div>
          </div>
        </div>

      </div>

      <transition name="fade">
        <div class="options-box" v-if="optionsBox_show">
          <div class="options">
            <div class="title">
              <div class="title-avatar">
                <img :src="optionsBox_avatar_url" alt="">
              </div>
              <div v-if="skus.length>0" class="meta">
                <div class="price">￥{{Math.round((skus[0].sell_price - skus[0].supply_price * 0.2) * 100) / 100}}</div>
                <div class="option-tips" :data-ii="indexArrText" v-if="!indexArrTextShow">请选择：<span v-for="(item, index) in attrs"> <span v-if="!indexArrText[index]">{{item.specs.name}}  <span v-if="index<attrs.length-1">、</span>  </span></span> </div>
                <div class="option-tips" v-if="indexArrTextShow">已选择：<span v-for="(item, index) in indexArrText"> '{{item}}' </span></div>
              </div>
            </div>

            <div class="option-item" v-for="(item, index) in attrs" :key="index">
              <!--<div v-for="(item, index) in skus">{{item}}</div>-->
              <div>{{item.specs.name}}</div>
              <div class="tag">
                <div class="tag-item" :data-i="index" :data-j="x" :class="indexArr[index][x]===true?'active':''" :data-index="i.attr_id" v-for="(i, x) in item.values" @click="optionClick(i,index,x)">{{i.value}}</div>
              </div>
            </div>

            <div class="add-btn">
              <div>数量</div>
              <div class="add">
                <div class="goods_num_reduce">-</div>
                <div class="buy_num">0</div>
                <div class="goods_num_add">+</div>
              </div>
            </div>
            <div class="confirm-btn">
              <button class="btn" @click="optionBoxClose()">确定</button>
            </div>
          </div>
        </div>
      </transition>


    </el-dialog>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import Qs from "qs";
import { server } from "../public/js/globalVariables.js";
import E from "wangeditor";
export default {
  name: "goodsDetail",
  components: {
    draggable
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  watch: {
    skus: function(newVal, oldVal) {
      this.skusSellPrice = [];
      this.skus.forEach((currentVal, index, arr) => {
        this.skusSellPrice.push(currentVal.sell_price);
      });

      // 用sku的长度去控制加价比例premium 的长度、并初始化其值
      if( this.skus.length > 0 ){
        for(let i=0;i<this.skus.length + 1;i++) {
          this.premium[i] = 1;
        }
      }

    }
  },
  methods: {
    //回退按钮
    appBack() {
      window.history.back();
    },

    //删除图片
    del_goods_img(currentIndex) {
      this.goods_imgs.splice(currentIndex, 1);
    },
    optionBoxShow() {
      this.optionsBox_show = !this.optionsBox_show;
      this.optionsBox_avatar_url = this.goods_imgs[0].file_path;

      let tempArr = [];
      for (let i = 0; i < this.attrs.length; i++) {
        tempArr[i] = [];
        for (let j = 0; j < this.attrs[i].values.length; j++) {
          tempArr[i][j] = false;
        }
      }
      this.indexArr = tempArr;

      for (let i = 0; i < this.attrs.length; i++) { //初始化多选的文本值
        this.indexArrText[i] = false;
      }

    },
    optionClick(i,index, index_self) {
      let tempValue = i.value;
      i.image ? this.optionsBox_avatar_url = i.image : true ;
      this.tagActiveIndex = i.attr_id;
      this.optionsBox_option_text = i.value;
      //console.log(index +""+index_self);
      this.indexArr[index].forEach((cVal, i, arr)=>{ //初始化多选的序号值
        this.indexArr[index][i] = false;
      });
      this.indexArr[index][index_self] = true;
      this.$set(this.indexArr[index], index_self, true); //数组更新检测
      this.$set(this.indexArr, index, this.indexArr[index]); //数组更新检测

      this.indexArr[index].forEach((cVal, i, arr)=>{ //文本赋新值
        if(cVal === true){
          //console.log(index);
          this.indexArrText[index] = tempValue;
        }
      });

      function check(x) {
        return x === false;
      }
      this.indexArrText.some(check) === false? this.indexArrTextShow = true : '';

    },
    //上传图片
    upLoadGoodsImg(e) {
      let currentDOM = e.target;
      var files = currentDOM.files;
//      console.log(files);
      var url = "";
      let formData = new FormData();
      if (files.length > 1) {
        url = "/wgl_admin/index.php?app=upload_img&act=batch_upload";
        formData.append("belong", 2);
        for (var i = 0; i < files.length; i++) {
          formData.append("image[" + i + "]", files[i]);
        }
      } else {
        url = "/wgl_admin/index.php?app=upload_img";
        formData.append("belong", 2);
        formData.append("image", files[0]);
      }
      //开始上传图片
      this.$http(
        url,
        "post",
        {},
        {},
        formData,
        success => {
          var data = success.data;
          if (data instanceof Array === true) {
            this.goods_imgs = this.goods_imgs.concat(data)
          } else {
            this.goods_imgs.push(data)
          }
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },

    //获取商品详情
    async getGoodsDetail(targetId) {
      let res = await new Promise((resolve, reject) => {
        this.$http(
          "/wgl_admin/index.php?app=goods&act=getDetail",
          "get",
          {},
          { goods_id: targetId },
          {},
          success => {
            resolve(success);
          },
          error => {
            reject(error);
          }
        );
      });
      if (!res.state.code) {
        let goodsDetail = res.data;
        this.currentGoodsId = goodsDetail.goods_id;
        this.sell = 1;
        this.goods_name = goodsDetail.goods_name;
        this.goods_url = goodsDetail.goods_url;
        for (var i = 0; i < goodsDetail.goods_imgs.length; i++) {
          this.goods_imgs.push({
            file_path: goodsDetail.show_images[i],
            store_path: goodsDetail.goods_imgs[i]
          });
        }
        this.description = goodsDetail.description;
        this.shipping = goodsDetail.shipping;
        this.text_description = goodsDetail.text_description;
        this.isShipping = "1";
        this.skus = goodsDetail.skus;
        //初始化 premium
        for(let i=0;i<=this.skus.length;i++) {
          this.premium[i] = 1;
        }

        let parentGtid = "";
        //获取分类列表
        let typeOptions = await new Promise((resolve, reject) => {
          this.$http(
            "/wgl_admin/index.php?app=goods_cate&act=get_cate_list",
            "get",
            {},
            {},
            {},
            success => {
              let listData = success.data;
              let resArr = [];
              for (let item of listData) {
                let childArr = [];
                if (item.child) {
                  for (let child of item.child) {
                    childArr.push({
                      value: child.gtid,
                      label: child.cate_name
                    });
                  }
                }
                resArr.push({
                  value: item.gtid,
                  label: item.cate_name,
                  children: childArr
                });
              }
              this.typeOptions = resArr;
              resolve(resArr);
            },
            error => {
              reject(error);
            }
          );
        });

        for (let item of typeOptions) {
          for (let child of item.children) {
            if (goodsDetail.gtid === child.value) {
              parentGtid = item.value;
            }
          }
        }

        //设置商品所属分类
        this.gtid = [parentGtid, goodsDetail.gtid];
        if (goodsDetail.gs_id !== 0) {
          for (let item of this.sourceList) {
            if (item.gs_id === goodsDetail.gs_id) {
              this.goodsSource = item;
            }
          }
        } else {
          this.goodsSource = "0";
          this.otherSource = goodsDetail.gs_name;
        }

        //获取属性选项
        let attrOptions = await new Promise((resolve, reject) => {
          this.$http(
            "/wgl_admin/index.php?app=goods_attr&act=get_attr_list&gtid=" +
              goodsDetail.gtid,
            "get",
            {},
            {},
            {},
            success => {
              let resArr = [];
              for (let item of success.data) {
                if (item.ga_name === "类型") {
                  this.defaultAttrValueId = item.gaid;
                }
                resArr.push({
                  createtime: item.createtime,
                  name: item.ga_name,
                  gaid: item.gaid,
                  value: item.gtid,
                  isEffectCustomPic: item.isEffectCustomPic,
                  isEffectPic: item.isEffectPic,
                  is_custom: item.is_custom,
                  sort: item.sort,
                  type: item.type
                });
              }
              this.attrOptions = resArr;
              resolve(resArr);
            },
            error => {
              reject(error);
            }
          );
        });

        //渲染attrs数组
        let hash = {};
        for (let item of this.skus) {
          for (let attr of item.attrs) {
            if (!hash[attr.attr_id]) {
              hash[attr.attr_id] = true;
            }
          }
        }
        //遍历哈希表
        for (let key in hash) {
          let currentOption = {};
          for (let option of attrOptions) {
            if (option.gaid == key) {
              currentOption = option;
            }
          }
          this.attrs.push({
            specs: currentOption,
            values: [],
            currentModal: false,
            currentAttrValue: ""
          });
        }

        //遍历attrs数组 添加value值
        let attrHash = {};
        let attrsArr = [];
        for (let item of this.skus) {
          for (let attr of item.attrs) {
            if (!attrHash[attr.value]) {
              attrHash[attr.value] = true;
              attrsArr.push(attr);
            }
          }
        }
        for (let attr of attrsArr) {
          for (let target of this.attrs) {
            if (attr.attr_id === target.specs.gaid) {
              target.values.push({
                attr_id: attr.attr_id,
                name: attr.name,
                value: attr.value,
                image: "",
                imgPath: ""
              });
            }
          }
        }
        //渲染商品的规格图片显示
        if (goodsDetail.attr_value_imgs.values.length) {
          for (let i in goodsDetail.attr_value_imgs.values) {
            if (this.attrs[0].values[i]) {
              this.attrs[0].values[i].image =
                goodsDetail.attr_value_imgs.values[i].show_img;
              this.attrs[0].values[i].imgPath =
                goodsDetail.attr_value_imgs.values[i].img;
            }
          }
        }
      } else {
        this.$message.error(res.state.msg);
      }
    },

    handleClose(done) {
      done();
      this.goodsDetail = [];
      //预览 skus 信息窗口关闭
      this.optionsBox_show = false;
      this.indexArr = [];
      this.indexArrText = [];
      this.indexArrTextShow = false;
    },
    optionBoxClose() {
      this.optionsBox_show = false;
      this.indexArr = [];
      this.indexArrText = [];
      this.indexArrTextShow = false;
    },
    onItemDrag(e) {
      console.log(e.target.dataset.index)
    },
    onDragEnd(e) {
      console.log("end" , e)
    },
    onCarouselChange(index) {
      this.carouselIndex = index + 1;
    },

    preview() {
      this.previewModal_show = true;
      this.skusSellPrice = [];
      this.skus.forEach((currentVal, index, arr) => {
        this.skusSellPrice.push(currentVal.sell_price);
      });

      /*      console.log(scope.row.goods_id);
      console.log(scope.$index);*/

      /*      this.$http(
        "/wgl_admin/index.php?app=goods&act=getDetail",
        "get",
        {
          admintoken: sessionStorage.loginMsg,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        { goods_id: scope.row.goods_id },
        {},
        success => {
          this.goodsDetail = success.data;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );*/
    },

    //选择属性
    selectAttr(data, index, e) {
      if (this.attrs[index].values.length > 0) {
        for (let item of this.attrs[index].values) {
          item.attr_id = data.gaid;
          item.name = data.name;
        }
        this.renderSkusTable(this.attrs);
      }
    },

    //上传规格图片
    uploadAttrValuesImg(e, i, k) {
      const currentDOM = e.target;
      //清空files
      currentDOM.value = "";
      let self = this;
      function readFile() {
        let image = this.files[0];
        let formData = new FormData();
        formData.append("belong", 2);
        formData.append("image", image);
        self.$http(
          "/wgl_admin/index.php?app=upload_img",
          "post",
          {},
          {},
          formData,
          success => {
            //上传sku属性图片
            self.attrs[i].values[k].imgPath = success.data.store_path;
            self.attrs[i].values[k].image = success.data.file_path;
          },
          error => {
            self.$message.error(error.state.msg);
          }
        );
      }

      currentDOM.addEventListener("change", readFile);
    },

    //发布商品
    handleClickPublish(shelves) {

      let self = this;
      let requiredArr = [
        ["goods_name", "string", "请输入商品的名称"],
        ["gtid", "Array", "请选择所属分类"],
        ["goods_imgs", "Array", "请上传商品图片"],
        ["shipping", "", "请输入运费"],
        ["goods_url", "string", "请输入商品链接"]
//        ["skus", "Array", "请输入价格和商品的库存"]
      ];
      //判断是否选择其他的商品来源
      if (this.goodsSource == "0") {
        if (this.otherSource === "") {
          this.$message.error("请输入其他的商品来源");
          return false;
        }
        this.goodsSource = {
          gs_id: 0,
          gs_name: this.otherSource
        };
      } else {
        requiredArr.push(["goodsSource", "Array", "请选择商品来源"]);
      }
      let result = this.$requiredFun(requiredArr, this);


      if (result.state) {
        this.fullscreenLoading = true;
        // 添加默认规格

        let formObj = {
          goods_name: this.goods_name,
          gtid: this.gtid[1],
          goods_imgs: this.goods_imgs.map((item, index) => {
            return item.store_path;
          }),
          shipping_type: 0,
          shipping: this.shipping,
          goods_url: this.goods_url,
          gs_name: this.goodsSource.gs_name,
          gs_id: this.goodsSource.gs_id,
          description: this.description,
          sell: !shelves ? "1" : "0",
          skus: this.skus,
          text_description: this.text_description
        };

        if (formObj.skus[0].attrs.length === 0) {
          formObj.skus[0].attrs = [];
          formObj.skus[0].attrs.push({
            attr_id: this.defaultAttrValueId,
            value: "默认规格"
          });
        }

        //添加规格图片
        if (this.attrs.length > 0) {
          formObj["attr_value_imgs"] = {
            attr_id: this.attrs[0].specs.gaid,
            attr_name: this.attrs[0].specs.name,
            values: []
          };
          for (let item of this.attrs[0].values) {
            formObj.attr_value_imgs.values.push({
              img: item.imgPath,
              name: item.value
            });
          }
        }

        //添加类型图片内容
        if (this.attrs.length > 0) {
          for (let item of this.attrs) {
            for (let attr of item.values) {
              this.attr_value.push({
                attr_id: item.specs.gaid,
                value: attr.value,
                value_id: 0
              });
            }
          }
          formObj["attr_value"] = this.attr_value;
        }

        let url;
        if (this.currentGoodsId) {
          url = "/wgl_admin/index.php?app=goods&act=updateSelfWare";
          formObj["goods_id"] = this.currentGoodsId; //当前的商品Id
        } else {
          url = "/wgl_admin/index.php?app=goods&act=storeSelfWare";
        }
        let uploadFormData = Qs.stringify(formObj);
        this.$http(
          url,
          "POST",
          {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8;"
          },
          {},
          uploadFormData,
          success => {
            this.fullscreenLoading = false;
            this.$message.success(success.state.msg);
            this.$router.push({
              name: "goods",
              params: {
                type: "all"
              }
            });
          },
          error => {
            this.fullscreenLoading = false;
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.fullscreenLoading = false;
        this.$message.error(result.msg);
      }
    },

    //删除行数据中的列数据
    delAttrValues(index, k) {
      this.$confirm("是否确定删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let attrs = this.attrs.slice();
          attrs[index].values.splice(k, 1);
          this.attrs = attrs;
          if (this.attrs[index].values.length > 0) {
            this.renderSkusTable(this.attrs);
          } else {
            if (index === 0) {
              this.skus = [
                {
                  supply_price: "",
                  sell_price: "",
                  play_price: "",
                  star_price: "",
                  stock: "",
                  exchange_stock: "",
                  attrs: []
                }
              ];
            } else {
              this.renderSkusTable(this.attrs);
            }
          }
        })
        .catch(() => {});
    },

    //删除整行数据
    delRow(index) {
      this.$confirm("是否确定删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          try {
            let attrs = this.attrs.slice();
            attrs.splice(index, 1);
            this.attrs = attrs;
            if (this.attrs) {
              this.renderSkusTable(this.attrs);
            } else {
              this.skus = [
                {
                  supply_price: "",
                  sell_price: "",
                  play_price: "",
                  star_price: "",
                  stock: "",
                  exchange_stock: "",
                  attrs: []
                }
              ];
            }
          } catch (err) {
            console.log(err);
          }
        })
        .catch(() => {});
    },

    //添加更多的值
    addMoreValue(parentIndex, attrObj) {
      if (!this.attrs[parentIndex].specs["name"]) {
        this.$message("请先选择商品规格");
        return;
      }
      //判断value值是否存在重复
      for (let item of this.attrs[parentIndex].values) {
        if (item.value === this.attrs[parentIndex].currentAttrValue) {
          this.$message.error(
            "已存在" + "'" + this.attrs[parentIndex].currentAttrValue + "'"
          );
          this.attrs[parentIndex].currentAttrValue = "";
          return;
        }
      }
      this.attrs[parentIndex].values.push({
        value: this.attrs[parentIndex].currentAttrValue,
        attr_id: this.attrs[parentIndex].specs["gaid"],
        name: this.attrs[parentIndex].specs["name"],
        image: "" //图片
      });

      //渲染表格数据
      this.renderSkusTable(this.attrs);
      this.attrs[parentIndex].currentAttrValue = ""; //清空数据
      this.attrs[parentIndex].currentModal = false; //关闭输入框
    },

    //构造数据
    renderSkusTable(originArr) {
      if (!originArr.length) {
        this.skus = [
          {
            supply_price: "",
            sell_price: "",
            play_price: "",
            star_price: "",
            stock: "",
            exchange_stock: "",
            attrs: []
          }
        ];
        return;
      }
      let arr1 = [],
        arr2 = [],
        arr3 = [],
        skus = [],
        len1 = 0,
        len2 = 0,
        len3 = 0;

      originArr.forEach((item, index) => {
        switch (index) {
          case 0:
            arr1 = item.values;
            len1 = item.values.length;
            break;
          case 1:
            arr2 = item.values;
            len2 = item.values.length;
            break;
          case 2:
            arr3 = item.values;
            len3 = item.values.length;
            break;
        }
      });

      let arrs = [arr1, arr2, arr3];
      console.log(arrs);

      for (let i = 0; i < arr1.length; i++) {
        if (arr2.length > 0) {
          for (let j = 0; j < arr2.length; j++) {
            if (arr3.length > 0) {
              for (let k = 0; k < arr3.length; k++) {
                skus.push({
                  stock: "",
                  exchange_stock: "",
                  sell_price: "",
                  supply_price: "",
                  play_price: "",
                  star_price: "",
                  attrs: [
                    {
                      value: arr1[i].value,
                      value_id: 0,
                      attr_id: arr1[i].attr_id,
                      name: arr1[i].name
                    },
                    {
                      value: arr2[j].value,
                      value_id: 0,
                      attr_id: arr2[j].attr_id,
                      name: arr2[j].name
                    },
                    {
                      value: arr3[k].value,
                      value_id: 0,
                      attr_id: arr3[k].attr_id,
                      name: arr3[k].name
                    }
                  ]
                });
              }
            } else {
              if (this.skus[i]) {
                skus.push({
                  stock: this.skus[i].stock,
                  exchange_stock: this.skus[i].exchange_stock,
                  sell_price: this.skus[i].sell_price,
                  supply_price: this.skus[i].supply_price,
                  play_price: this.skus[i].play_price,
                  star_price: this.skus[i].star_price,
                  attrs: [
                    {
                      value: arr1[i].value,
                      value_id: 0,
                      attr_id: arr1[i].attr_id,
                      name: arr1[i].name
                    },
                    {
                      value: arr2[j].value,
                      value_id: 0,
                      attr_id: arr2[j].attr_id,
                      name: arr2[j].name
                    }
                  ]
                });
              } else {
                skus.push({
                  stock: "",
                  exchange_stock: "",
                  sell_price: "",
                  supply_price: "",
                  play_price: "",
                  star_price: "",
                  attrs: [
                    {
                      value: arr1[i].value,
                      value_id: 0,
                      attr_id: arr1[i].attr_id,
                      name: arr1[i].name
                    },
                    {
                      value: arr2[j].value,
                      value_id: 0,
                      attr_id: arr2[j].attr_id,
                      name: arr2[j].name
                    }
                  ]
                });
              }
            }
          }
        } else {
          if (this.skus[i] && this.skus[i].attrs.length > 0) {
            skus.push({
              stock: this.skus[i].stock,
              exchange_stock: this.skus[i].exchange_stock,
              sell_price: this.skus[i].sell_price,
              supply_price: this.skus[i].supply_price,
              play_price: this.skus[i].play_price,
              star_price: this.skus[i].star_price,
              attrs: [
                {
                  value: arr1[i].value,
                  value_id: 0,
                  attr_id: arr1[i].attr_id,
                  name: arr1[i].name
                }
              ]
            });
          } else {
            skus.push({
              stock: "",
              exchange_stock: "",
              sell_price: "",
              supply_price: "",
              play_price: "",
              star_price: "",
              attrs: [
                {
                  value: arr1[i].value,
                  value_id: 0,
                  attr_id: arr1[i].attr_id,
                  name: arr1[i].name
                }
              ]
            });
          }
        }
      }
      console.log(skus);
      this.skus = skus;
    },


    localFormat( num, type ) {
        return Math.round(num * 100) / 100;
    },

    //批量设置数据
    batchData(type, e) {

      console.log("type :", type);
      console.log("e :", e);

      let x = this.premium[0];
      for (let item of this.skus) {
        switch (type) {
          case 1:
            item.supply_price = Number(e.target.value);
            //批量、自动设置零售价
            item.sell_price =  this.localFormat(Number(item.supply_price)*x);
            this.sell_price = this.localFormat(Number(this.supply_price)*x);
            //批量、自动设置星星价
            item.sell_price == "0"
            ?
            (() => { //如果成本是0，那星星价也是0
              item.star_price = 0;
              this.star_price = 0;
            })()
            :
            ( ()=> {
              item.star_price = Math.ceil(Number(item.sell_price)*100);
              this.star_price = Math.ceil(Number(this.sell_price)*100);
            })();
            //批量设置加价比例
            this.premium.forEach((cVal, index, arr)=>{
                this.premium[index] = this.premium[0];
            });
            break;
          case 2:
            item.sell_price = Number(e.target.value);
            //批量、自动设置星星价
            item.sell_price == "0"
              ?
              (() => { //如果成本是0，那星星价也是0
                item.star_price = 0;
                this.star_price = 0;
              })()
              :
              ( ()=> {
                item.star_price = Math.ceil(Number(item.sell_price)*100);
                this.star_price = Math.ceil(Number(this.sell_price)*100);
              })();
            break;
          case 3:
            item.play_price = Number(e.target.value);
            break;
          case 4:
            item.star_price = Number(e.target.value);
            break;
          case 5:
            item.stock = Number(e.target.value);
            break;
          default:
            item.exchange_stock = Number(e.target.value);
            break;
        }
      }
    },

    batchData2(type, e, index) {

      console.log("type:",type);
      console.log("index:",index);


      console.log("this.skus.length:",this.skus.length);

      let x; //加价比例
      if( this.skus.length === 1 ){
        x = this.premium[0]; //加价比例
      }
      else {
        x = this.premium[index+1]; //加价比例
      }

        if( type === 1 ){

          this.skus[index].supply_price == "0"
            ?
            (() => { //如果成本是0，那星星价也是0
              this.skus[index].sell_price = 0;
              this.skus[index].star_price = 0;
            })()
            :
            ( ()=> {
              this.skus[index].sell_price = this.localFormat((Number(this.skus[index].supply_price)*x));
              this.skus[index].star_price = Math.ceil(Number(this.skus[index].sell_price)*100);
            })();
        }
        if( type === 2 ){
          this.skus[index].sell_price == "0"
            ?
            (() => { //如果成本是0，那星星价也是0
              this.skus[index].star_price = 0;
            })()
            :
            ( ()=> {
              this.skus[index].star_price = Math.ceil((Number(this.skus[index].sell_price)*100));
            })();

        }

    },

    onPremiumChange(i){
      console.log(i);
      let x = this.premium[i];
      //批量设置的第一项
      if( i === 0 ){
        this.sell_price = this.localFormat((Number(this.supply_price)*x));
        this.star_price = Math.ceil(Number(this.sell_price)*100);

        for (let item of this.skus) {
          item.sell_price = this.sell_price;
          item.star_price = this.star_price;
        }

        this.premium.forEach(( cVal, index, arr )=>{
            this.premium[index] = this.premium[0];
        })


      }
      else {
          this.skus[i-1].sell_price = this.localFormat((Number(this.skus[i-1].supply_price)*x));
          this.skus[i-1].star_price = Math.ceil(Number(this.skus[i-1].sell_price)*100);
      }
    },

    // renderTable() {
    //   var skuArr = [];
    //   for (var i = 0; i < this.attrs[0].values.length; i++) {
    //     var skuX_value = this.attrs[0].values[i].value;
    //     var attrs = [
    //       {
    //         value: skuX_value,
    //         rowspan: 1
    //       }
    //     ];
    //     if (this.attrs.length > 1) {
    //       var attrsStr = JSON.stringify(attrs);
    //       for (var j = 0; j < this.attrs[1].values.length; j++) {
    //         var skuY_value = this.attrs[1].values[j].value;
    //         var attr = {
    //           value: skuY_value,
    //           rowspan: 1
    //         };
    //         var attrsJson = JSON.parse(attrsStr);
    //         if (this.attrs[1].values.length == 1) {
    //           if (i == 0) {
    //             var rowspan =
    //               this.attrs[0].values.length *
    //               (this.attrs.length > 2 ? this.attrs[2].values.length : 1);
    //             attr.rowspan = rowspan;
    //             attrsJson.push(attr);
    //           }
    //         } else {
    //           if (j == 0) {
    //             attrsJson.forEach((val, idx, arr) => {
    //               val.rowspan *= this.attrs[1].values.length;
    //             });
    //             attrsJson.push(attr);
    //           } else {
    //             attrsJson = [];
    //             attrsJson.push(attr);
    //           }
    //         }
    //         if (this.attrs.length > 2) {
    //           var attrs2Str = JSON.stringify(attrsJson);
    //           for (var z = 0; z < this.attrs[2].values.length; z++) {
    //             var skuZ_value = this.attrs[2].values[z].value;
    //             var attr2 = {
    //               value: skuZ_value,
    //               rowspan: 1
    //             };
    //             var attrs2Json = JSON.parse(attrs2Str);
    //             if (this.attrs[2].values.length == 1) {
    //               if (i == 0 && j == 0) {
    //                 var rowspan =
    //                   this.attrs[0].values.length * this.attrs[1].values.length;
    //                 attr2.rowspan = rowspan;
    //                 attrs2Json.push(attr2);
    //               }
    //             } else {
    //               if (z == 0) {
    //                 attrs2Json.forEach((val, idx, arr) => {
    //                   val.rowspan *= this.attrs[2].values.length;
    //                 });
    //                 attrs2Json.push(attr2);
    //               } else {
    //                 attrs2Json = [];
    //                 attrs2Json.push(attr2);
    //               }
    //             }
    //             addSku(attrs2Json, skuX_value, skuY_value, skuZ_value);
    //           }
    //         } else {
    //           addSku(attrsJson, skuX_value, skuY_value);
    //         }
    //       }
    //     } else {
    //       addSku(attrs, skuX_value);
    //     }
    //   }
    //   this.skuArr = skuArr;
    //   console.log(skuArr);

    //   function addSku(attrs, skuX_value, skuY_value, skuZ_value) {
    //     var sku = {};
    //     sku.skuX_value = skuX_value;
    //     if (skuY_value) {
    //       sku.skuY_value = skuY_value;
    //     }
    //     if (skuZ_value) {
    //       sku.skuZ_value = skuZ_value;
    //     }
    //     sku.attrs = attrs;
    //     skuArr.push(sku);
    //   }
    // },

    //点击添加商品的规格
    handleClickAddAttrs() {
      if (!this.gtid.length) {
        this.$message("请先选择商品所属分类");
        return;
      }
      //增加一行数据结构
      this.attrs.push({
        specs: {},
        values: [],
        currentModal: false, //当前文本输入框是否显示
        currentAttrValue: "" //当前文本输入框的值
      });
    },

    //获取商品的来源
    getGoodsSource() {
      this.$http(
        "/wgl_admin/index.php?app=goods_source&act=get_goods_source",
        "get",
        {},
        {},
        {},
        success => {
          this.sourceList = success.data;
        },
        error => {}
      );
    },

    //获取商品的属性
    getGoodsAttr(gtid) {
      this.$http(
        "/wgl_admin/index.php?app=goods_attr&act=get_attr_list&gtid=" + gtid[1],
        "get",
        {},
        {},
        {},
        success => {
          let resArr = [];
          for (let item of success.data) {
            if (item.ga_name === "类型") {
              this.defaultAttrValueId = item.gaid;
            }
            resArr.push({
              createtime: item.createtime,
              name: item.ga_name,
              gaid: item.gaid,
              value: item.gtid,
              isEffectCustomPic: item.isEffectCustomPic,
              isEffectPic: item.isEffectPic,
              is_custom: item.is_custom,
              sort: item.sort,
              type: item.type
            });
          }
          this.attrOptions = resArr;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //获取商品的分类
    getCateList() {
      this.$http(
        "/wgl_admin/index.php?app=goods_cate&act=get_cate_list",
        "get",
        {},
        {},
        {},
        success => {
          if (!success.data) {
            this.typeOptions = [];
            return;
          }
          let listData = success.data;
          let resArr = [];
          for (let item of listData) {
            let childArr = [];
            if (item.child) {
              for (let child of item.child) {
                childArr.push({
                  value: child.gtid,
                  label: child.cate_name
                });
              }
            }
            resArr.push({
              value: item.gtid,
              label: item.cate_name,
              children: childArr
            });
          }
          this.typeOptions = resArr;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //创建富文本编辑器
    createEditor() {
      //富文本编辑器渲染
      let editor = new E("#editorElem");
      let self = this;
      editor.customConfig.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "image" // 插入图片
      ];
      editor.customConfig.zIndex = 100;
      editor.customConfig.onchange = html => {
        self.description = html;
      };
      setTimeout(() => {
        editor.txt.html(this.description);
      }, 1000);
      editor.customConfig.customUploadImg = (files, insert) => {
        var url = "";
        let formData = new FormData();
        if (files.length > 1) {
          url = "/wgl_admin/index.php?app=upload_img&act=batch_upload";
          formData.append("belong", 2);
          for (var i = 0; i < files.length; i++) {
            formData.append("image[" + i + "]", files[i]);
          }
        } else {
          url = "/wgl_admin/index.php?app=upload_img";
          formData.append("belong", 2);
          formData.append("image", files[0]);
        }
        //开始上传图片
        this.$http(url, "post", {}, {}, formData,
          success => {
            var data = success.data;
            if (data instanceof Array === true) {
              data.forEach((val, idx, arr) => {
                insert(val.file_path)
              })
            } else {
              insert(data.file_path)
            }
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      }

      editor.customConfig.showLinkImg = false; //网络图片隐藏
      editor.customConfig.uploadImgMaxLength = 10; //限制上传张数是10 一次最多上传10张图片
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; //限制图片上传大小为3m
      editor.create();
    }
  },
  async created() {
    //获取分类列表
    this.getCateList();
    //获取商品来源列表
    this.getGoodsSource();
    if (this.$route.params.goodsId !== "null") {
      this.getGoodsDetail(this.$route.params.goodsId);
    }
  },
  mounted() {
    this.createEditor();
  },
  data() {
    return {
      text_description: "",
      supply_price: "",
      sell_price: "",
      play_price: "",
      star_price: "",
      stock: "",
      exchange_stock: "",
      fullscreenLoading: false,
      previewModal_show: false,
      modal_width_height: "560px",
      sell: 0, //是否上架
      attr_value: [],
      image: [], //sku图片
      description: "", //商品的描述
      goods_imgs: [],
      shipping: "",
      goodsSource: [], //商品来源
      goods_name: "", //商品名字
      goods_url: "", //商品链接
      gtid: [], //商品分类
      attrs: [], //商品规格列表 长度最大值为3
      carouselIndex: 1,
      skus: [{
        supply_price: "",
        sell_price: "",
        play_price: "",
        star_price: "",
        stock: "",
        exchange_stock: "",
        attrs: []
      }],
      skusSellPrice: [],
      premium : [1],
      premiumOption: [
        {
          value: 1,
          text: "0%"
        },
        {
          value: 1.05,
          text: "5%"
        },
        {
          value: 1.1,
          text: "10%"
        },
        {
          value: 1.15,
          text: "15%"
        },
        {
          value: 1.2,
          text: "20%"
        },
        {
          value: 1.25,
          text: "25%"
        },
        {
          value: 1.3,
          text: "30%"
        }
      ],
      sourceList: [], //商品来源列表
      typeOptions: [],
      defaultAttrValueId: "", //默认的value值
      uploadAction: "",
      isShipping: "", //是否选择运费模版
      attrOptions: [], //属性选项
      otherSource: "", //其他的商品来源
      currentGoodsId: "", //当前的商品id
      skuArr: [],
      attr_value_imgs: [], //商品规格对应的图片
      optionsBox_show : false,
      optionsBox_avatar_url: '',
      optionsBox_option_text: "",
      tagActiveIndex : '',
      indexArr: [],
      indexArrText: [],
      indexArrTextShow: false
    };
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>

.fade-enter-active, .fade-leave-active {
  transition: opacity .4s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.publish-goods {
  padding-top: 32px;

  .back-btn {
    padding: 0 0 30px 30px;
  }

  .labelName {
    text-align: right;
    float: left;
    width: 76px;
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 12px;
    position: relative;
    padding-left: 5px;
    margin-right: 10px;
  }

  .labelName.mandatory:before {
    content: "*";
    color: #df0024;
    display: inline;
  }

  .img_list {
    height: 110px;
    width: auto;
    display: block;
    > .img_item {
      float: left;
      width: 110px;
      height: 110px;
      border: 1px solid #e6e8f4;
      margin-right: 20px;
      position: relative;
      cursor: move;
      .show_img {
        display: block;
        width: 100%;
        height: 100%;
      }
      .del {
        cursor: pointer;
        width: 22px;
        height: 22px;
        background: #919191;
        position: absolute;
        right: 0;
        top: 0;
        padding: 3px;
        > img {
          display: block;
          width: 16px;
          height: 16px;
        }
      }
    }
  }

  .add-pic-btn {
    width: 110px;
    height: 110px;
    background-image: none;
    background-color: #f8f9fe;
    border: 1px solid #e6e8f4;
    text-align: center;
    cursor: pointer;
    position: relative;
    outline: 0;
    .add-pic-btn-inner {
      line-height: 1;
      margin-top: 28px;
      .add-icon {
        line-height: 25px;
        font-size: 42px;
        color: #e6e8f4;
        display: block;
        width: 30px;
        height: 25px;
        margin: 0 auto 14px;
      }
      .btn-text {
        margin: 0 auto;
        font-size: 12px;
        color: #999;
      }
    }
    .upload-button-form {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      > .uploadFile {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        cursor: pointer;
        z-index: 99;
      }
    }
  }
}

.publish-container {
  background: #ffffff;
  border: 1px solid #e6e8f4;
  padding: 60px 0 100px 56px;
  margin: 0 55px 0 30px;
  .uploadImg {
    height: 110px;
    margin-bottom: 18px;
  }
  .inputDiv {
    display: block;
    height: 40px;
    margin-bottom: 18px;
    .elInput {
      float: left;
      width: 240px;
    }
  }
}

.attrs {
  width: auto;
  height: auto;
  margin-bottom: 20px;
  .attrs-list {
    width: 92%;
    margin-left: 86px;
    .list-item {
      .select-type {
        background: #dde0f3;
        height: 50px;
        padding: 5px 0 5px 15px;
        margin-bottom: 20px;
        position: relative;
        > select {
          display: block;
          height: 40px;
          width: 146px;
          border-radius: 5px;
        }
      }
      .del {
        position: absolute;
        right: 12px;
        top: 13px;
        font-size: 16px;
        cursor: pointer;
        color: #999;
      }
      .select-type:hover .del:after {
        content: "\2716";
      }
    }
  }
  .addSpecs {
    height: 50px;
    background: #dde0f3;
    padding-left: 25px;
    .btns {
      color: #3293fe;
      height: 50px;
      line-height: 50px;
      font-size: 12px;
      cursor: pointer;
    }
  }
}

.control-btns {
  width: 100%;
  height: 80px;
  background: #dde0f3;
  padding: 20px 0 20px 40px;
}

.preview-box {
  .el-dialog--center .el-dialog__body {
    padding: 0;
  }

  .preview-content {
    min-height: 500px;
    padding-bottom: 60px;
    border-radius: 2px;
    background-color: #f4f4f4;
    position: relative;
    .preview-banner {
      position: relative;
      .el-carousel__container {
        .el-carousel__item {
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .goods-index {
        position: absolute;
        right: 15px;
        bottom: 15px;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 22px;
        color: #fff;
        font-size: 10px;
        border-radius: 15px;
        padding: 4px;
        background-color: rgba(31, 31, 31, 0.51);
      }
    }

    .goods-info {
      display: flex;
      flex-direction: column;

      .info-top {
        display: flex;
        padding: 0 15px;
        background-color: #fff;

        .top-left {
          flex: 1;
          padding: 14px 0;

          .my-star {
            display: flex;
            align-items: center;
            color: #1f1f1f;
            font-size: 18px;
            line-height: 18px;
            font-weight: bold;
            margin-bottom: 10px;

            .star-num {
              color: #f23150;
              font-size: 20px;
              line-height: 20px;
              font-weight: bold;
              margin: 0 20px 0 5px;
            }
            span {
              color: #999;
              font-size: 12px;
            }
          }
          .goods-name {
            color: #1f1f1f;
            max-width: 80%;
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
        .top-right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding-right: 5px;

          img {
            display: block;
          }
          .share {
            color: #1f1f1f;
            font-size: 14px;
            line-height: 14px;
            margin-top: 14px;
          }
        }
      }

      .info-bottom {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 14px 15px;
        background-color: #fff;

        &:before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 100%;
          height: 1px;
          transform: scaleY(0.5);
          background-color: #d1d1d1;
        }

        div {
          color: #999;
          font-size: 14px;
        }
      }
    }

    .goods-rich {
      margin-top: 10px;
      background-color: #fff;

      .goods-detail {
        display: flex;
        align-items: center;
        padding: 0 20px;
        font-size: 14px;
        line-height: 40px;
        color: #1f1f1f;

        img {
          margin-right: 11px;
        }
        width: 100%;
        height: 40px;
      }

      .goods-content {
      }
    }
    .action {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 54px;
      display: flex;
      background-color: #fff;
      cursor: pointer;
      .home-coll {
        display: flex;
        width: 29.6%;
        height: 100%;
        .action-sm {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          div {
            font-size: 11px;
            color: #999;
            margin-top: 3px;
          }
        }
      }

      .action-lg {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 35.2%;

        div:first-child {
          color: #1f1f1f;
          font-size: 15px;
          line-height: 15px;
          font-weight: bold;
        }

        div:last-child {
          margin-top: 4px;
          color: #1f1f1f;
          font-size: 12px;
          font-weight: bold;
        }

        &.buy-now {
          background-color: #fff1b8;
        }

        &.play-now {
          background-color: #ffda44;
        }
      }
    }
  }

  .options-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(0,0,0,.6);

    .options {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 640px;
      background: #fff;
      z-index: 10;
      padding: 10px;

      .title {
        display: flex;
        width: 100%;
        height: 120px;
        padding: 0 20px;
        border-bottom: 1px solid #e6e6e6;
        .title-avatar {
          display: flex;
          position: relative;
          top: -20px;
          width: 120px;
          height: 120px;
          border: 1px solid #ddd;
          background: #fff;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .meta {
          display: flex;
          margin-left: 20px;
          flex-direction: column;
          .price {
            margin-top:25px;
            height:18px;
            line-height:18px;
            font-size:18px;
            color:#fb155f;
          }
          .option-tips {
            margin-top: 14px;
          }
          .selected {
            margin-top:10px;
            margin-left:100px;
            line-height:12px;
            font-size:12px;
            color:#333;

          }
        }
      }
      .option-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 80px;
        border-bottom: 1px solid #e6e6e6;
        margin:0 10px;
        padding:10px 0;
        border-bottom:1px solid #f5f5f5;
        .tag {
          display: flex;
          flex-wrap: wrap;
          .tag-item {
            float:left;
            height:28px;
            line-height:28px;
            padding:0 10px;
            font-size:13px;
            color:#1f1f1f;
            background-color:#f5f5f5;
            border-radius:5px;
            margin-right:15px;
            margin-top:10px;
            &.active {
              background: #ffda44;
            }
          }
        }
      }
      .add-btn {
        display: flex;
        justify-content: space-between;
        padding: 16px 10px;

        height: 80px;
        .add {
          display: flex;
          .buy_num {
            float:left;
            margin-left:2px;
            width:48px;
            height:25px;
            line-height:25px;
            background-color:#f5f5f5;
            border-radius:3px;
            font-size:14px;
            color:#1f1f1f;
            text-align:center;
          }
          .goods_num_reduce {
            display: flex;
            justify-content: center;
            align-items: center;
            float:left;
            width:27px;
            height:25px;
            line-height:15px;
            text-align:center;
            background-color:#f5f5f5;
            border-radius:3px;
            font-weight: bold;

          }
          .goods_num_add {
            display: flex;
            justify-content: center;
            align-items: center;
            float:left;
            margin-left:2px;
            width:27px;
            height:25px;
            background-color:#ffda44;
            border-radius:3px;
            font-weight: bold;
          }
        }
      }
    }

    .confirm-btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      width: 100%;
      height: 36px;
      padding: 0 16px;
      border: none;

      .btn {
        width: 100%;
        height: 42px;
        line-height: 42px;
        background-color: #ffda44;
        border-radius: 5px;
        font-size: 18px;
        color: #1f1f1f;
        text-align: center;
        font-weight: bold;
        border: none;
      }
    }

  }


}

.priceStock {
  min-height: 40px;
  margin-bottom: 40px;
  .table-container {
    float: left;
    padding: 40px;
    border: 1px solid #e6e8f4;
    > table {
      th {
        max-width: 150px;
        height: 30px;
        line-height: 30px;
        font-size: 11px;
        color: #666;
        text-align: center;
      }
      td {
        text-align: center;
        min-width: 32px;
        max-width: 150px;
        height: 32px;
        color: #666;
        > .skusInput {
          margin: 0 auto;
          display: block;
          width: 80%;
          height: 32px;
          border: 1px solid #e6e8f4;
          text-align: center;
        }
      }
    }
  }
}

.goodsLink {
  height: 54px;
  margin-bottom: 18px;
}

.goodsSource {
  float: left;
  width: 422px;
  margin-bottom: 18px;
  height: 40px;
  padding: 8px 0;
}

.otherSource {
  float: left;
  width: 240px;
}

.shipping {
  float: left;
  width: 300px;
  .radio-container {
    height: 40px;
    padding: 8px 0;
    margin-right: 10px;
  }
}

.editorDetail {
  height: 600px;
  #editorElem {
    float: left;
    width: 1200px;
    height: 600px;
  }
}

.sizelist {
  display: block;
  max-width: 640px;
  margin-bottom: 20px;
  .attr-value-panel {
    .attr-val-item {
      margin-right: 60px;
      margin-bottom: 20px;
      .val-text {
        min-width: 110px;
        margin-bottom: 10px;
        color: #999;
        position: relative;
        > .value {
          padding: 0 15px;
          display: block;
          height: 32px;
          line-height: 30px;
          border: 1px solid #e6e8f4;
          text-align: center;
        }
        > .del {
          position: absolute;
          right: 5px;
          top: 6px;
          font-size: 12px;
          cursor: pointer;
        }
        > .del:after {
          content: "✖";
        }
      }

      .uploadImg-box {
        width: 110px;
        height: 110px;
        border: 1px solid #e6e8f4;
        background: #f8f9fe;
        position: relative;
        margin: 0 auto;
        .uploadImg-tips {
          width: 100%;
          height: 100%;
          .add-icon {
            text-align: center;
            color: #e6e8f7;
            font-size: 40px;
            height: 70px;
            line-height: 70px;
          }
          .des {
            font-size: 14px;
            text-align: center;
            color: #a6a8a5;
          }
        }
        .previewImages {
          display: block;
          width: 100%;
          height: 100%;
          > img {
            display: block;
            height: 100%;
            width: 100%;
          }
          .change-btn {
            position: absolute;
            bottom: 0;
            text-align: center;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            height: 24px;
            line-height: 24px;
            left: 0;
            cursor: pointer;
            font-size: 12px;
            cursor: pointer;
          }
          .change-btn:hover {
            background: #333;
          }
        }
        .uploadInputFile {
          width: 100%;
          height: 100%;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          cursor: pointer;
          z-index: 9999;
          cursor: pointer;
        }
      }
    }
  }
  .btns {
    width: 110px;
    height: 152px;
    position: relative;
    .elButton {
      margin: auto;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      width: 86px;
      height: 40px;
    }
  }
}
</style>
